<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态页面</title>
    <meta name="viewport" content="width=device-width,initial-scalable=1,user-scalable=no">
    <link rel="stylesheet" href="动态.css">
</head>
<body>
   <div id="aa">
       <img id="a" src="fish.png" alt="">
       <img id="b" src="muted.png" alt="">
       <img id="c" src="text.png" alt="">
       <img id="d" src="first-fish.png" alt="">
       <div>
           <img id="q" src="water.png" alt="">
       </div>
       <img id="e" src="ice.png" alt="">
       <img id="f" src="bubble.png" alt="">
       <img id="g" src="weixin.png" alt="">
       <img id="h" src="second-fish.png" alt="">
       <div class="musicplay" onclick="playpause()"></div>
       <!--preload 页面加载时进行加载，预播放-->
       <audio id="music"  loop preload="preload">
           <source src="music.mp3">
           你的浏览器不支持html5，换个浏览器吧！
       </audio>
   </div>
</body>
</html>
<script >
   var audio = document.getElementById('music')
   var musicplay=document.getElementsByClassName("musicplay")[0]
   function  playpause(){
    //    判断音频是否在播放
    // pasued:暂停

    // audio.paused获取到的值有两种情况1true,暂停2false,播放；
    if(audio.paused == true){
        musicplay.style.backgroundImage="url(sound.png)";
        audio.play();
    }
    // 否则，就暂停
    else{
        musicplay.style.backgroundImage="url(muted.png)"
        audio.pause();
    }


   }

</script>